<!--
 * @Description: 首页组件
 * @Author: hai-27
 * @Date: 2020-02-07 16:23:00
 * @LastEditors: hai-27
 * @LastEditTime: 2020-02-27 13:36:12
 -->
<template>
	<div class="home" id="home" name="home">
		<!-- 轮播图 -->
		<div class="block">
			<el-carousel height="460px">
				<el-carousel-item v-for="item in carousel" :key="item.carousel_id">
					<img style="height:460px;" :src="$target + item.imgPath" :alt="item.describes" />
				</el-carousel-item>
			</el-carousel>
		</div>
		<!-- 轮播图END -->
		<div class="main-box">
			<div class="main">
				<!-- 水果商品展示区域 -->
				<div class="fruit" id="promo-menu">
					<div class="box-hd">
						<div class="title">水果</div>
						<div class="more" id="more">
							<MyMenu :val="2" @fromChild="getChildMsg">
								<span slot="1">畅销</span>
								<span slot="2">新品</span>
							</MyMenu>
						</div>
					</div>
					<div class="box-bd">
						<div class="promo-list">
							<ul>
								<li>
									<!-- <img :src="$target +'../assets/imgs/fruit2.jpg'" /> -->
									<img src="../assets/imgs/fruit7.jpg" />
								</li>
								<li>
									<!-- <img :src="$target +'../assets/imgs/fruit6.jpg'" /> -->
									<img src="../assets/imgs/fruit6.jpg" />
								</li>
							</ul>
						</div>
						<div class="list">
							<MyList :list="fruitList" :isMore="true"></MyList>
						</div>
					</div>
				</div>
				<!-- 水果商品展示区域END -->
			</div>
		</div>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				carousel: "", // 轮播图数据
				miTvList: "", // 小米电视商品列表
				fruitList: "", // 水果商品列表
				fruitHotList: "", //畅销水果商品列表
				fruitActive: 1, // 水果当前选中的商品分类
			};
		},
		watch: {
			// 水果当前选中的商品分类，响应不同的商品数据
			fruitActive: function(val) {
				// 页面初始化的时候把fruitHotList(畅销水果商品列表)直接赋值给fruitList(水果商品列表)
				// 所以在切换商品列表时判断fruitHotList是否为空,为空则是第一次切换,把fruitList赋值给fruitHotList
				if (this.fruitHotList == "") {
					this.fruitHotList = this.fruitList;
				}
				if (val == 1) {
					// 1为畅销商品
					this.fruitList = this.fruitHotList;
					return;
				}
				if (val == 2) {
					// 2为电视商品
					this.fruitList = this.miTvList;
					return;
				}
			}
		},
		created() {
			// 获取轮播图数据
			this.$axios
				.post("/goods/selectInfo", {})
				.then(res => {
					this.carousel = res.data.goodsCarouselList;
				})
				.catch(err => {
					return Promise.reject(err);
				});
			// 获取各类商品数据
			this.getPromo("电视机", "miTvList");
			this.getPromo(
				["电视机", "空调", "洗衣机"],
				"fruitList",
				"/goods/selectInfo"
			);
		},
		methods: {
			// 获取水果模块子组件传过来的数据
			getChildMsg(val) {
				this.fruitActive = val;
			},
			// 获取各类商品数据方法封装
			getPromo(name, val, api) {
				api = api != undefined ? api : "/goods/selectInfo";
				this.$axios
					.post(api, {
						name
					})
					.then(res => {
						this[val] = res.data.data;
					})
					.catch(err => {
						return Promise.reject(err);
					});
			}
		}
	};
</script>
<style scoped>
	@import "../assets/css/index.css";
</style>
